Hace unos días Francisco de Blog and Web me mostraba algo que sin lugar a dudas vamos a utilizar en más de una ocasión, se trata de una chuleta o Cheat Sheet de Blogger gracias a ella tendremos ayuda extra cuando intentemos modificar nuestra plantilla.
Lo mejor de todo es que con esa chuleta aprenderemos a conocer y movernos mejor por nuestra plantilla.

Descarga
Blogger Cheat Sheet (PDF) / Ver en línea
Imagen png – 1 , 2
(Imágenes y descargas obtenidas de Blog and Web)

¿Para qué sirve? como Francisco bien explica sirve para:
  • Modificar elementos de una plantilla existente.
  • Adaptar un diseño de otra plataforma.
  • Crear un diseño nuevo para Blogger.
¿Cómo usarla? Con unos conocimientos básicos ya podemos usar la chuleta.

¿Cómo hacemos para realizar algunas modificaciones?
Buscamos la clase o id en la chuleta de la parte que deseamos modificar y cambiar los atributos en el CSS de la plantilla.

El ejemplo que Francisco pone para modificar el color del título de blog.

Buscamos en la chuleta, la clase correspondiente al título del blog que sería h1.title, se busca la clase en el código CSS de la plantilla, si existe se modifica el código de color y sino, se agrega la nueva clase:

h1.title {
color:#000;
/* otros atributos */
}

Otro ejemplo para buscar la fecha de publicación del post, en la chuleta veríamos que viene definido con .date-header si buscamos en nuestra plantilla veremos esa clase y desde ahí podemos modificarla:

h2.date-header {
margin:1.5em 0 .5em;
}

Para orientarnos mejor la chuleta viene acompañada de una imagen


Si en tus aspiraciones está Adaptar un diseño de otra plataforma la chuleta sirve para encontrar el equivalente en blogger de cada elemento.

Ejemplo: En un theme WordPress el título de los post tiene un clase llamada .tit, se copia la clase y los atributos y se renombra en blogger como: .post-title que sería la clase de título en los post.

Naturalmente adaptar una plantilla no es tan sencillo como parece, es necesario familiarizarse y tener unos conocimientos básicos de CSS porque no siempre hay equivalentes y hay que modificar también la estructura.

Podemos utilizarla para crear un nuevo diseño
A partir de la chuleta se puede crear un estructura CSS y HTML que sirva para diseñar sin estar desde Blogger, o bien, solo la estructura CSS y trabajar en linea.

Ayuda y correcciones
La chuleta es básica y precisamente por ello creo que puede ser muy útil para mucha gente, si crees lo mismo, agradecemos si nos ayudas a difundirla, en tu blog, bitacoras.com o meneame. Y si tienes correcciones o una opinión te agradecemos el comentario.
Gearheads

Muy útil Gem@, se agradece :D

Responder
Gem@

yz Me alegra que te agrade Gearheads :)

Responder
Fabiana

La verdad que Francisco estuvo bárbaro con esta plantilla, :O lo que acabo de descargarme es un pack de íconos de aniversario en Ciudad Blogger que están bárbaros (para quien les sirva el datito). Los voy a utilizar y así evitarme un post sobre el aniversario, es que soy medio (bastante)haragana :$

Responder
Candela MG

Ya la conseguí de Rosa, me pareció muy útil ^^
Gem@! Tengo un problema-problemón que no veas... No se muestra el gagdet de seguidores en mi blog! Lo eliminé y puese otro nuevo... ¡nada! Me he metido a la plantilla a ver si tenía algún código raro cerca que lo ocultase... ¡nada! Lo extraño es que ocupa el mismo espacio que como si estuviese ahí... Pero no se ve nada...
No entiendo lo que puede pasar, voy a investigar por ahí y preguntar también a otros, que ahora me acuerdo que estás de vacaciones jeje siento pues las molestias! ^^
Saludos, Gem@!

Responder
Manuel
Este comentario ha sido eliminado por el autor.
Responder
Manuel

Hola Gem@, quiero cambiar el color de la letra del menubar que tengo entre el header y el main de mi blog. Desde “fuentes y colores” se pueden cambiar eligiendo la opcion de “color de los enlaces de la columna lateral superior” pero entonces tambiñen me cambia el color del texto de la sidebar derecha. He intentado modificar el código cambiando el código de color en la plantilla (#menubar) y tampoco lo consigo. ¿Cómo podría hacerlo o como podría separar el código de la menubar de la sidebar para que los cambios no afecten a ambas? Quizás pido demasiado. Saludos.
Se me olvidaba. Mi blog: http://rutasyfotos.blogspot.com

Responder
Gem@

yz Hola Fabiana ya me hiciste la boca agua con esos iconos, así que hay que verlos :)

yz Damned estoy de vacaciones y aquí también :D Verás no he podido comprobar si esto que te digo funciona para recuperar los seguidores.
Ingresa en la barra de Herramientas/Opciones- Privacidad y elimina todas las cookies con eso aseguran que se soluciona, si también te resultara nos cuentas :D

yz Hola M@nuel desde fuentes y colores las opciones que ofrece son únicamente para lo que indica a no ser que se añadan después nuevas variables.
Intenta añadir los estilos de esa fuente en LinkList1

#LinkList1 {
color: #ffff66;
}
Veamos si resulta porque no puedo comprobarlo desde aquí :(

Responder
Candela MG

No funcionó, Gem@... :-| Estoy a la espera de la respuesta de JMiur, a ver... Pero, ¡¡gracias!! ^^
Saludetes!

Responder
Manuel

Gracias Gem@, pero lo colores continuan igual. Si no lo soluciono te lo recordaré más adelante, cuando ya puedas comprobarlo.
Saludos.

Responder
Candela MG

De todas formas, es algo raro, y no creo que sea lo que tú dices ahora que lo pienso... En mi otro blog se ve el gadget, y en todos loas demas tb; al parecer solo en "Con la rosa en la boca" están invisibilizados... :S

Responder
Susy

En primer lugar, SIIIII:P!!!, cambié el fondo de los nombres de comentarios por otro más claro y ahí están todossssss jajajaja.

Y pensar que tuve y tengo que arreglar el resto del blog por los cambios y bobadas que se me ocurrieron!!!

En fin, como bien dices, eso nos pasa a todos alguna vez y la próxima lo haré en el de pruebas. Pero pregunto: entonces, cuando se salva la plantilla anterior como hice, antes de cambiar nada, cuando se vuelve a poner la copia no respeta los efectos, enlaces, etc???.

Y esto que nos traes hoy desde luego que me lo pongo en favoritos porque útil y práctico lo debe ser mucho.

Un besito y muchas gracias.

Responder
Henry Herrera

Aun de vacaciones:P ? , creo que los españoles si saben pasarla de lo mejor. Continua Disfrutando de un coco debajo de la palmera.

Henry

Responder
Liz Hopps

Gemma hay alguna forma de que la primra letra del post sea mas grande que el resto, como en ,os libros?

Se puede?

Yo y mis ideas :O :O :O

BESOS

LIZ

Responder
Candela MG

A eso te puedo contestar yo! ^^
Pásate por aquí, u amigo blogger lo explica muy bien ;)
Saludos!

Responder
Gem@

yz M@nuel hay que renombrar los colores del menú y lo tienes si no recuerdo mal con widget LinkList, precisamente J.Miur en su última entrada habla de eso ;)

Sobrescribir estilos inline con CSS

yz Susy la plantilla respeta todo lo que hay en ella, es decir todo lo que se encuentra en plantilla cuando la editamos en Edición de HTML pero no lo que añadimos en plantilla de diseño, es decir los gadgets como los seguidores, listado de blogs ...
La chuleta de Francisco es muy útil para tenerla a mano haces bien si le das un repasito.
(He visto tu mail que voy a contestar)

yz Hola Henry gracias por comentar, como saber sabemos todos otra cosa es tener la oportunidad de disfrutar dos meses de vaciones :D

yz Elizabetha Souvre ¡que ganas tenía que me preguntaras algo y poder ayudarte!! jajajaja Damned ha sido más rápida así que hazle caso porque Botxero lo explica divinamente :D

yz Gracias Damned eres un encanto :D

Responder
Susy

Gem@,
antes de nada disculpas por perturbar tus vacaciones con mi correo, al recibir el automático tuyo me dió no se qué y, explicándole tu ausencia, recurrí a JMiur que muy amablemente me dijo cómo debía arreglar el problema.
Así pues, no le dediques al asunto un minuto ¿vale? que ya está todo en su sitio y, claro, yo no sabía que al salvar la plantilla se perdían los "añadidos". Ahora ya lo sé y veré de guardarlos, si se puede, por otro lado.

Un besito de verano.

Responder
MARIA PILAR DE DIEGO SANCHEZ

Hola Gema, ante todo gracias por facilitarnos tanta informacion. Y paso a solicitarte ayuda, pues he decidido cambiar la plantilla de mi blog en uno de los lugares que nos recomendabas, pero no encuentro que hacer y como hacer la navegacion con la etiqueta de arriba denominada 'EDIT' que supongo que será para ir al panel de blogger. Tambien me gustaria saber como incorporar alguna etiqueta mas como la que tu tienes por ejemplo para suscribirse a tu blog. http://pruebapiluqui.blogspot.com/ este es el blog con la nueva plantilla que estoy probando.

Responder
Majarete

Gem@, a veces busco ayuda en google blog, y habla de la plantilla clásica. Al parecer hay varias plantillas, pero ¿que tipo de plantilla es la clásica y como sé cual tengo?

Responder
Gem@

yz Amiga Susy el no se qué me da a mi al leerte porque no quiero que te de esa sensación, el automático lo puse con la idea de informar que no puedo contestar con la puntualidad que me gustaría. Siento no estar en el momento indicado para ayudarte créeme. De perturbar nada de nada, hiciste lo mejor ;)

yz MARIA PILAR para configurar EDIT en el menú lo que puedes hacer es lo siguiente:
<li><a href='#'>Edit</a></li>

La almohadilla # debes sustituirla por la url del acceso a tu escritorio de esta forma si tienes marcado "recordar contraseña" accedes directamente pero no te preocupes que sólo accedes tu, si lo marcan las visitas nos llevará al escritorio de cada uno o la página de acceso a Blogger.
Para añadir una nueva etiqueta prueba a añadir en la siguiente línea de Edit

<li><a href='url de la página a suscripción'>Suscribirse</a></li>

yz Majarete la plantilla clásica es la que se usaba hace un par de años en Blogger, se trabajaba y añadía todo en la plantilla, imágenes, códigos, scripts...
Luego añadieron mejoras como los gadgets que trabajamos desde plantilla de diseño y los añadimos cómodamente con un click poco a poco fueron añadiendo más cambios y hasta lo que podemos ver hoy.
Tu plantilla no es la clásica pero sabrás que no lo es si no tienes opción de plantilla de diseño.

Responder
Maite

Bueno, por fin me he puesto al día, empecé en la entrada actual y he llegado para atrás hasta aquí que es donde me quedé, no conocía esta chuleta y me ha venido de perlas!
He ido apuntando cosas para probar así que tiembla jajaja
Pero Gema, será posible que he estado tan despistada que no sabía ni que blogger se había actualizado? y por qué me lo perdí? ni idea, como lo actualizo ahora? quiero recuperar los comentarios con imagen, recuerdas que lo hice con tu método y se perdieron meses atrás las fotos? pues ahora que te ví que tengo que tener pinchado desde configuración que se permite ver la foto tu me dirás, o actualizo o actualizo! :S
Besos... volveré :D

Responder
Gem@

:: Hola Maite actualizarse es mucho decir, es cierto que Blogger añadió el avatar de comentarios pero también es cierto que a las pocas emanas dejó de funcionar y sin funcionar estuvo meses y meses como ocurre ahora con el gadget de seguidores.
No sé si verías esta entrada %% Avatar en comentarios

Responder
Marcos Sánchez v.

Hola Gem@ me e quedado impresionado con este blog y con la particularidad como explicas tus temas y los diferentes comentarios a todos tus seguidores se nota realmente que amas todo lo relacionado a blogger ya despues lo pude comprobar por tu descripcion al final wao realmente impresionante todo lo que se puede hacer con mucha dedicacion tiempo y esfuerzo felicitaciones :) a antes que nada me llamo marcos soy de peru tengo una pregunta quizas dos o tres jejeje bueno dependiendo de mis inquietudes :D estoy cambiando la plantilla de mi blog http://marcos-sanchez-v.blogspot.com/ por esta http://stitchpress-bloggertemplateplace.blogspot.com/ el principal problema es que esta en ingles lo quiero en castellano por lo cual busque en google y di con tu impresionante blog :)... No entiendo muy bien como hacer los cambios me e guiado de las chuletas y cuando e ido a edicion html dentro de mi blog y e realizado la busqueda (h1.title {) dentro de todo el codigo asi como lo explicas en tu ejemplo no me da el codigo me muestra no encontrado...(Imagen del resultado http://i53.photobucket.com/albums/g56/marcossv/edicion_HTML_blog.png) asi lo busco?? o como es el procedimiento para encontrar los codigos que se muestran en las chuletas??? o abra algun programa que tengo q usar...? o que pasos hice mal? agradecerte de antemano por todas tu respuesta :) a excelente blog te agregare como enlace a mi blog :) felicitaciones nuevamente nos vemos

Responder
Gem@

:: Hola marcos, la plantilla que has escogido es una plantilla adaptada a Blogger, eso quiere decir de entrada que lo que vas a encontrar es muy distinto a lo que verías en una original de Blogger.
La chuleta es muy útil pero no quiere decir que lo que indica es lo que vamos a encontrar en nuestra misma plantilla sino que podemos modificar la plantilla con unas nociones de CSS y la chuleta nos ayudará a ubicar esa parte o al menos ayudarnos a familiarizarnos con ella para realizar cualquier cambio.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top